<!DOCTYPE html>
<html lang="en" style="width: 99vw">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="/js/vue.min.js"></script>
    <script src="/elementUI/index.js"></script>
    <link rel="stylesheet" href="/elementUI/index.css">
    <script src="/js/axios.min.js"></script>
    <style type="text/css">
        body {
            scroll: "no";
            scroll: "auto";
            overflow-x: hidden;
            overflow-y: hidden;
        }
        
        html {
            scroll: "no";
            scroll: "auto";
            overflow-x: hidden;
            overflow-y: hidden;
        }
    </style>



</head>

<body scroll="no">
    <div id="app">
        <el-row :gutter="20">
            <el-breadcrumb style="font-size: 30px;margin-left: 10px">
                <el-breadcrumb-item>用户列表</el-breadcrumb-item>
            </el-breadcrumb>
        </el-row>
        <el-divider></el-divider>
        &nbsp;
        <div style="float: left">
            <el-button type="primary" @click="dialogAddFormVisible = true">添加用户</el-button>
        </div>
        <br>

        <br><br>

        <el-row :gutter="20">
            <el-table ref="multipleTable" :data="tableData">
                <el-table-column prop="id" label="id">
                </el-table-column>
                <el-table-column prop="username" label="账号">
                </el-table-column>
                <el-table-column prop="email" label="邮箱">
                </el-table-column>
                <el-table-column prop="phoneNum" label="手机号">
                </el-table-column>
                <el-table-column prop="role.roleName" label="角色">
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="150">
                    <template slot-scope="scope">
            <el-button  @click="handleEdit(scope.row)" type="text"  icon="el-icon-edit" title="修改用户信息"></el-button>
            <el-button  @click="handleDelete(scope.row)" type="text"  icon="el-icon-delete" title="删除用户"></el-button>

                </template>
                </el-table-column>
                </template>
            </el-table>
            <div class="block" style="width: 100vw;">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5,10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="count" style="width: 100%;">
                </el-pagination>
            </div>
        </el-row>


        <el-dialog title="用户修改" :visible.sync="dialogEditFormVisible" width="615px" :before-close="handleClose">
            <el-form :model="editFrom" label-position="left" model="{
                name: '',
                region: '',
                type: ''
            }" :inline="true">

                <el-form-item label="用户名称">
                    <el-input v-model="editFrom.username" style="width: 200px;" placeholder="请输入用户名称"></el-input>
                </el-form-item>

                <el-form-item label="用户密码">
                    <el-input placeholder="请输入用户密码" style="width: 200px;" v-model="editFrom.password" show-password></el-input>
                </el-form-item>

                <el-form-item label="用户邮箱">
                    <el-input v-model="editFrom.email" style="width: 200px;" placeholder="请输入用户邮箱"></el-input>
                </el-form-item>


                <el-form-item label="手机号码">
                    <el-input v-model="editFrom.phoneNum" style="width: 200px;" placeholder="请输入手机号码"></el-input>
                </el-form-item>

                <el-form-item label="账号角色">
                    <el-select v-model="editFrom.role.id" style="width: 200px;">
                        <el-option v-for="item in roles" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="账号状态">
                    <el-select v-model="editFrom.status" style="width: 200px;">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="getData(obj)">取 消</el-button>
                <el-button type="primary" @click="editProduct">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="用户添加" :visible.sync="dialogAddFormVisible" width="615px" :before-close="handleClose">
            <el-form :model="addFrom" label-position="left" model="{
                name: '',
                region: '',
                type: ''
            }" :inline="true">

                <el-form-item label="用户名称">
                    <el-input v-model="addFrom.username" style="width: 200px;" placeholder="请输入用户名称"></el-input>
                </el-form-item>

                <el-form-item label="用户密码">
                    <el-input placeholder="请输入用户密码" style="width: 200px;" v-model="addFrom.password" show-password></el-input>
                </el-form-item>

                <el-form-item label="用户邮箱">
                    <el-input v-model="addFrom.email" style="width: 200px;" placeholder="请输入用户邮箱"></el-input>
                </el-form-item>


                <el-form-item label="手机号码">
                    <el-input v-model="addFrom.phoneNum" style="width: 200px;" placeholder="请输入手机号码"></el-input>
                </el-form-item>

                <el-form-item label="账号角色">
                    <el-select v-model="addFrom.role.id" style="width: 200px;">
                        <el-option v-for="item in roles" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="账号状态">
                    <el-select v-model="addFrom.status" style="width: 200px;">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="getData(obj)">取 消</el-button>
                <el-button type="primary" @click="addProduct">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</body>
<script>
    var obj = {
        page: 1,
        limit: 5,
        productName: ""
    }
    var v1 = new Vue({
        el: "#app",
        data: {
            tableData: [{
                "id": 1,
                "username": "账号",
                "password": "11223344",
                "email": "邮箱",
                "phoneNum": "手机号",
                "status": 0,
                "role": {
                    "id": 1,
                    "roleName": "角色名",
                    "roleDesc": "角色描述"
                }
            }],
            productName: "",
            count: 100,
            currentPage: 1,
            pageSize: 5,
            multipleSelection: [],
            dialogEditFormVisible: false,
            dialogAddFormVisible: false,
            options: [{
                value: 0,
                label: '关闭'
            }, {
                value: 1,
                label: '开启'
            }],
            roles: [{
                value: 1,
                label: 'admin11'
            }, {
                value: 2,
                label: 'user222'
            }],
            editFrom: {
                username: "",
                password: "",
                email: "",
                role: {
                    id: 5
                },
                status: 0,
            },
            addFrom: {
                username: "",
                password: "",
                email: "",
                role: {
                    id: 5
                },
                status: 0,
            }

        },
        methods: {
            // 切换分页调用方法
            handleSizeChange(val) {
                //获取切换后的分页数val 
                //切换分页后应该从第一页开始查询
                // 向后台发送请求获取新的数据
                this.currentPage = 1;
                this.pageSize = val;

                console.log({
                    "当前页码": this.currentPage,
                    "当前分页数": this.pageSize
                });
                obj.page = this.currentPage;
                obj.limit = this.pageSize;
                obj.productName = this.productName;
                axios({
                    // 请求方式
                    method: 'get',
                    url: '/product/json',
                    // 传递参数 data使用流发送数据 params台servlet可以直接获取
                    params: obj,
                    //响应的数据格式 默认就是json 可以省略
                    responseType: 'json'
                }).then(response => {
                    // 请求成功
                    let res = response.data;
                    console.log(res);
                    v1.tableData = res.list;
                    v1.count = res.total;

                }).catch(error => {
                    // 请求失败，
                    console.log(error);
                    // 一般不用
                });
            },
            // 当跳转指定页面时调用的方法
            handleCurrentChange(val) {
                //获取跳转的页码val
                //获取当前分页数this.pageSize
                // 向后台发送请求获取新的数据
                this.currentPage = val;
                console.log({
                    "当前页码": this.currentPage,
                    "当前分页数": this.pageSize
                });
                obj.page = this.currentPage;
                obj.limit = this.pageSize;
                obj.productName = this.productName;
                axios({
                    // 请求方式
                    method: 'get',
                    url: '/product/json',
                    // 传递参数 data使用流发送数据 params台servlet可以直接获取
                    params: obj,
                    //响应的数据格式 默认就是json 可以省略
                    responseType: 'json'
                }).then(response => {
                    // 请求成功
                    let res = response.data;
                    console.log(res);
                    v1.tableData = res.list;
                    v1.count = res.total;

                }).catch(error => {
                    // 请求失败，
                    console.log(error);
                    // 一般不用
                });
            },
            handleEdit(row) {
                console.log(row);
                //修改数据为当前行
                v1.editFrom = row;
                v1.dialogEditFormVisible = true;
            },
            handleDelete(row) {

                v1.$confirm('此操作将永久删除该用户:' + row.username + ', 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios({
                        // 请求方式
                        method: 'get',
                        url: '/product/deleteJson',
                        // 传递参数 data使用流发送数据 params台servlet可以直接获取
                        params: {
                            id: row.id
                        },
                        //响应的数据格式 默认就是json 可以省略
                        responseType: 'json'
                    }).then(response => {
                        // 请求成功
                        let res = response.data;
                        v1.tableData = res.list;
                        v1.count = res.total;
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    }).catch(error => {
                        // 请求失败，
                        console.log(error);
                        // 一般不用
                        this.$message({
                            type: 'info',
                            message: '删除失败'
                        });
                    });
                }).catch(() => {

                });
            },
            editProduct() {

                axios({
                    // 请求方式
                    method: 'post',
                    url: '/product/editJson',
                    // 传递参数 data使用流发送数据 params台servlet可以直接获取
                    data: v1.editFrom,
                    //响应的数据格式 默认就是json 可以省略
                    responseType: 'json'
                }).then(response => {
                    // 请求成功
                    let res = response.data;
                    v1.tableData = res.list;
                    v1.count = res.total;

                }).catch(error => {
                    // 请求失败，
                    console.log(error);
                    // 一般不用
                });
                v1.currentPage = 1;
                v1.pageSize = 5;

                v1.dialogEditFormVisible = false;
            },
            handleClose(done) {
                getData(obj);
            },
            addProduct() {
                axios({
                    // 请求方式
                    method: 'post',
                    url: '/product/addJson',
                    // 传递参数 data使用流发送数据 params台servlet可以直接获取
                    data: v1.addFrom,
                    //响应的数据格式 默认就是json 可以省略
                    responseType: 'json'
                }).then(response => {
                    // 请求成功
                    let res = response.data;
                    v1.tableData = res.list;
                    v1.count = res.total;

                }).catch(error => {
                    // 请求失败，
                    console.log(error);
                    // 一般不用
                });
                v1.dialogAddFormVisible = false;
            },
            deleteIds() {
                var ids = new Array();
                for (var i in v1.multipleSelection) {
                    // console.log(i,v1.multipleSelection[i].id)
                    ids[i] = v1.multipleSelection[i].id;
                }
                console.log(ids);
                axios({
                    // 请求方式
                    method: 'post',
                    url: '/product/deleteIdsjson',
                    // 传递参数 data使用流发送数据 params台servlet可以直接获取
                    data: {
                        "ids": ids
                    },
                    //响应的数据格式 默认就是json 可以省略
                    responseType: 'json'
                }).then(response => {
                    // 请求成功
                    let res = response.data;
                    //console.log(res);
                    v1.tableData = res.list;
                    v1.count = res.total;
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(error => {
                    // 请求失败，
                    console.log(error);
                    // 一般不用
                    this.$message({
                        type: 'info',
                        message: '删除失败'
                    });
                });
            }
        }
    })

    function getData(obj) {
        //发送异步请求访问第一页数据
        axios({
            // 请求方式
            method: 'get',
            url: '/product/json',
            // 传递参数 data使用流发送数据 params台servlet可以直接获取
            params: obj,
            //响应的数据格式 默认就是json 可以省略
            responseType: 'json'
        }).then(response => {
            // 请求成功
            let res = response.data;
            console.log(res);
            v1.tableData = res.list;
            v1.count = res.total;
        }).catch(error => {
            // 请求失败，
            console.log(error);
            // 一般不用
        });
        v1.dialogEditFormVisible = false;
        v1.dialogAddFormVisible = false;
    }
    getData(obj);
</script>

</html>